<template>
  <KView class="coupon-success-dialog">
    <KView class="coupon-success-dialog-bg">
      <img class="sys-img" :src="imgData.couponSuccess" mode="aspectFit">
    </KView>
    <KView class="coupon-success-dialog-content">
      <KView class="coupon-success-dialog-close">
        <KView @click="closeDialog">
          <sys-svg name="close" color="#ffffff"></sys-svg>
        </KView>
      </KView>
      <KView class="coupon-success-dialog-title">领取成功</KView>
      <KView class="coupon-success-dialog-text">
        <KView>你已成功领取</KView>
        <KView>{{coupon.shopName}}{{coupon.money}}元优惠券</KView>
      </KView>
      <KView class="coupon-success-dialog-btn" @click="toUsedCoupon">去使用&nbsp;&gt;</KView>
    </KView>
  </KView>
</template>

<script>
  import GlobalData from 'utils/globalData';
  import SysSvg from 'common/sysSvg';

  export default {
    props: {
      coupon: {
        type: Object,
        required: true
      }
    },

    data() {
      return {
        imgData: GlobalData.images.sysCoupon
      };
    },

    methods:{
      closeDialog(){
        this.$emit('close');
      },

      toUsedCoupon(){
        this.$emit('use-coupon',this.coupon);
      }
    },

    components: {
      SysSvg
    }
  };

</script>

<style lang="scss">
  .coupon-success-dialog {
    height: 100%;
    position: relative;

    >div {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .coupon-success-dialog-content {
      padding-top: formatPx(40);
      height: calc(100% - #{formatPx(40)});

      .coupon-success-dialog-close {
        height: formatPx(52);

        >div {
          width: formatPx(20);
          height: formatPx(20);
          margin-right: formatPx(40);
          float: right;
          background: rgba(0, 0, 0, .5);
          border-radius: 50%;
          padding: formatPx(16);
        }
      }

      .coupon-success-dialog-title {
        margin-top: formatPx(84);
        height: formatPx(50);
        line-height: formatPx(50);
        font-size: formatPx(36);
        text-align: center;
        color: #ffffff;
      }

      .coupon-success-dialog-text {
        width: formatPx(430);
        height: formatPx(200);
        margin: auto;
        margin-top: formatPx(80);
        font-size: formatPx(28);
        color: #3b3b3b;
        text-align: center;

        >div {
          line-height: formatPx(40);
        }
      }

      .coupon-success-dialog-btn {
        width: formatPx(230);
        height: formatPx(64);
        margin: auto;
        margin-top: formatPx(80);
        line-height: formatPx(64);
        border-radius: formatPx(32);
        font-size: formatPx(30);
        color: #f8404c;
        background: #fbe945;
        text-align: center;
      }
    }
  }

</style>
